<script setup lang="ts">
import { ref, reactive, defineEmits, onBeforeMount,onMounted, onUpdated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Dialog, Toast } from 'vant';
import axios from 'axios'
import useClipboard from 'vue-clipboard3';
const router = useRouter()

const isUpdate = ref(false);

// data是提取的卡密
// data1是返回url
// Catalogue: "QQ%E8%B6%85%E7%BA%A7%E4%BC%9A%E5%91%98%20%2830%E5%A4%A9%29"
// Code: 201
// Crate_Time: "2022-03-05"
// Data: "Null"
// Data1: "Null"
// Order_status: "-1"
// Pattern: "Kami"
// Remarks: "%E5%A4%87%E6%B3%A8%E5%8F%82%E6%95%B0"
// account: "212121"
// 商品信息
const goodsInfo = reactive({
    Catalogue: "",
    Order_status: '0',
    cdk: '',
    Crate_Time: '',
    Remarks: '',
    statusText: '等待充值',
    account: '',
    Pattern: '',
    Data: "",
    Data1: ""

})
const { toClipboard } = useClipboard()
onMounted(() => {
    // 生命周期

    const params = router.currentRoute.value.query as any;
    if (!params.cdk) {
        return;
    }

    goodsInfo.cdk = params.cdk;
    getOrderDetail(0);

})

const statusTextCon: any = {
    '0': '等待充值',
    '1': '正在处理/充值订单',
    '2': '充值成功',
    '-1': '订单异常'
}

/**
 *   "Crate_Time": "创建时间戳",
    "Order_status": "订单状态",       0==等待充值     1==正在处理/充值订单      2==充值成功     -1==订单异常
    "Catalogue": "返回对应商品名",
    "Remarks": "返回备注",
    Catalogue: "QQ超级会员 (30天)"
Code: 201
Crate_Time: "2022-03-07"
Data: "",//卡密
Data1: ""
Order_status: "2"
Pattern: "QQ"
Remarks: "备注信息"
account: "838534"
*/
const getOrderDetail = (type: number) => {
    axios({
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: '/api',
        data: 'Request=Inquire_about_order&Cdk=' + goodsInfo.cdk
    }).then(res => {
        console.log(res);
        const data = res.data;
        if (data.Code == 201) {
            goodsInfo.Catalogue = data.Catalogue;
            goodsInfo.Order_status = data.Order_status;
            goodsInfo.Crate_Time = data.Crate_Time;
            goodsInfo.Remarks = data.Remarks;
            goodsInfo.statusText = statusTextCon[data.Order_status || '0']
            goodsInfo.account = data.account;
            goodsInfo.Data = data.Data;
            goodsInfo.Data1 = data.Data1;
            goodsInfo.Pattern = data.Pattern;
            isUpdate.value = false;
        } else {
            Toast(data.msg || '刷新失败');
        }

    })
}


const btnUpdate = () => {
    isUpdate.value = true;
    getOrderDetail(2);
}

const btnreturn = () => {
    router.back()
}


// 复制剪贴板
const copyPass = async (data: string) => {
    console.log('复制卡密', data);
    if (!data) {
        Toast('无卡密');
        return;
    }
    try {
        await toClipboard(data)
        console.log('Copied to clipboard')
        Toast('卡密已复制！');
    } catch (e) {
        console.error(e)
    }
}
// 复制剪贴板
const copyPassData = async (data: string) => {
    console.log('复制兑换地址', data);
    if (!data) {
        Toast('无兑换地址');
        return;
    }
    try {
        await toClipboard(data)
        Toast('兑换地址已复制！');
    } catch (e) {
        console.error(e)
    }
}



</script>

<template>
    <div class="mentions">
        <div class="show-content">
            <div class="content" v-if="goodsInfo.Pattern == 'Kami'">
                <div class="item">
                    <div class="label">卡密信息</div>
                    <div class="item-goods" @click="copyPass(goodsInfo.Data)">
                        <span class="showtext">{{ goodsInfo.Data }}</span>
                        <img class="icon" src="@/assets/img/copy.png" />
                    </div>
                </div>
                <div class="item">
                    <div class="label">对应商品</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.Catalogue }}</span>
                    </div>
                </div>

                <div class="item" v-if="goodsInfo.Data1">
                    <div class="label">兑换地址</div>
                    <div class="item-goods" @click="copyPassData(goodsInfo.Data1)">
                        <span class="showtext">{{ goodsInfo.Data1 }}</span>
                        <img class="icon" src="@/assets/img/copy.png" />
                    </div>
                </div>
                <div class="title">使用教程</div>
                <div class="teach">如果只有卡密,就直接去对应的商品App或网页去兑换,如果是充值链接,直接复制出去打开兑换即可,如果是带兑换链接又有卡密,对应打开链接填写卡密即可兑换成功！</div>
                <div class="btn-light" @click="btnUpdate">
                    <van-loading size="24px" v-if="isUpdate">加载中...</van-loading>
                    <span v-else>刷新</span>
                </div>
            </div>
            <div class="content" v-else>
                <div class="item">
                    <div class="label">订单号</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.cdk }}</span>
                    </div>
                </div>
                <div class="item">
                    <div class="label">充值账号</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.account }}</span>
                    </div>
                </div>

                <div class="item">
                    <div class="label">对应商品</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.Catalogue }}</span>
                    </div>
                </div>

                <div class="item">
                    <div class="label">处理时间</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.Crate_Time }}</span>
                    </div>
                </div>

                <div class="item">
                    <div class="label">完成状态</div>
                    <div class="item-goods">
                        <span class="showtext">{{ goodsInfo.statusText }}</span>
                    </div>
                </div>

                <div class="btn-light" @click="btnUpdate">
                    <van-loading size="24px" v-if="isUpdate">加载中...</van-loading>
                    <span v-else>刷新</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style  lang="less">
.content {
    background: #fffaf4;
    padding: 0 5px 60px;
    .title {
        height: 24px;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #10242c;
        line-height: 24px;
        margin-bottom: 11px;
    }

    .dec {
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 23px;
        margin-bottom: 31px;
    }

    .teach {
        font-size: 13px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 24px;
    }

    .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 32px;
        margin-bottom: 32px;
        img {
            display: inline-block;
            width: 88px;
            height: 88px;
        }
        span {
            display: inline-block;
            margin-top: 14px;
            font-size: 17px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ff8a23;
            line-height: 22px;
        }
    }
    .tip-msg {
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 24px;
        margin-bottom: 42px;
        text-align: center;
    }

    .item {
        margin-bottom: 24px;
        .label {
            height: 22px;
            font-size: 17px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #10242c;
            line-height: 22px;
            margin-bottom: 8px;
        }
        .item-info {
            height: 56px;
            background: #ffffff;
            border-radius: 28px;
            opacity: 0.7;
            border: 3px solid rgba(255, 138, 35, 0.1);
            padding: 10px 40px 10px 24px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            .input {
                display: block;
                height: 36px;
                box-sizing: border-box;
                width: 100%;
                min-width: 0;
                margin: 0;
                padding: 0;
                line-height: inherit;
                text-align: left;
                background-color: transparent;
                border: 0;
                resize: none;
                user-select: auto;
                font-size: 16px;
                font-weight: 700;
            }
            .icon {
                width: 16px;
                height: 16px;
            }
        }
        .itemfocus {
            border: 3px solid rgba(255, 138, 35, 0.6);
        }
        .item-goods {
            border-radius: 27px;
            display: flex;
            align-items: center;
            padding: 15px 24px;
            background: rgba(16, 36, 44, 0.04);
            .showtext {
                display: inline-block;
                width: 100%;
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: rgba(16, 36, 44, 0.4);
                line-height: 24px;
            }
            .icon {
                width: 32px;
                height: 32px;
            }
        }
    }
    .btn-light {
        width: 100%;
        box-sizing: border-box;
        height: 66px;
        background: #df3030;
        box-shadow: 0px 11px 15px 0px rgba(255, 138, 35, 0.2);
        border-radius: 33px;
        margin-top: 60px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
            font-size: 15px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #ffffff;
            line-height: 20px;
        }
    }
    .btn-gray {
        height: 66px;
        background: #ffffff;
        box-shadow: 0px 20px 40px 0px rgba(223, 48, 48, 0.05);
        border-radius: 33px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            font-size: 15px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #10242c;
            line-height: 20px;
        }
    }
}
</style>
